<template>
  <p-modal
    :visible="visible"
    :title="title"
    :mask-closable="false"
    :destroy-on-close="true"
    :width="600"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <p-form-model
      ref="form"
      style="margin-top: 15px"
      :label-col="{ span: 2 }"
      :wrapper-col="{ span: 22 }"
      :model="form"
      :rules="rules"
    >
      <p-form-model-item label="类别:" prop="leseLevel">
        <Selectleseleave
          :id="detail.id"
          v-model="form.leseLevel"
          :has-all="false"
          @input="hanlderChange"
        />
      </p-form-model-item>
      <p-form-model-item label="细类:" prop="leseDetail">
        <Selectleseleave
          v-model="form.leseDetail"
          :parent-id="parentId"
          :has-all="false"
          lese-level="2"
        />
      </p-form-model-item>
      <p-form-model-item label="原因:" prop="reason">
        <p-textarea
          v-model="form.reason"
          placeholder="请输入"
          style="height: 80px; resize: none"
        />
      </p-form-model-item>
    </p-form-model>
  </p-modal>
</template>

<script>
import { postleadsLose } from '@/api/clue';
import Selectleseleave from '@/components/select/Selectleseleave.vue';
const defaultForm = {
  leseLevel: '',
  leseDetail: '',
  reason: '',
};
export default {
  components: {
    Selectleseleave,
  },
  props: {
    title: {
      type: String,
      default: '线索失销',
    },
    visible: {
      type: Boolean,
      default: false,
    },
    detail: {
      type: Object,
      default: () => ({}),
    },
    clueId: {
      type: [String, Number],
      default: undefined,
    },
  },

  data() {
    return {
      parentId: '1',
      form: {
        ...defaultForm,
      },
      rules: {
        leseLevel: [
          { required: true, message: '请选择类别！', trigger: 'change' },
        ],
        leseDetail: [
          { required: true, message: '请选择细类！', trigger: 'change' },
        ],
        reason: [{ max: 256, message: '输入的内容过长', trigger: 'blur' }],
      },
    };
  },
  computed: {},
  watch: {},
  methods: {
    hanlderChange(val) {
      this.parentId = val;
      this.form.leseDetail = '';
    },
    handleCancel() {
      this.$emit('update:visible', false);
    },
    async handleOk() {
      const valid = await this.$refs.form.validate();
      if (!valid) return new Promise(() => {});
      const res = await postleadsLose({
        item: this.form.leseDetail,
        category: this.form.leseLevel,
        remark: this.form.reason,
        bizType: 'leads',
        bizId: this.clueId,
      });
      if (res.data.success) {
        this.$message.success('线索已失销！');
        this.$emit('fresh');
        this.handleCancel();
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .poros-form-item {
  margin-bottom: 10px;
}
.item-container {
  display: flex;
  align-items: center;
}
</style>
